<template>
  <div class="legend-box" v-if="state.showLegend">
    <el-tabs v-model="state.iconActiveName" class="demo-tabs" stretch>
      <el-tab-pane label="图标" name="one" v-if="state.iconActiveName == 'one'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="open-no span-block"></span>
            <span>未启动</span>
          </div>
          <div class="col-height">
            <span class="wait-ing span-block"></span>
            <span>等待中</span>
          </div>

          <div class="col-height">
            <span class="sw-comput span-block"></span>
            <span>水文计算中</span>
          </div>

          <div class="col-height">
            <span class="sk-comput span-block"></span>
            <span>水库调度中</span>
          </div>

          <div class="col-height">
            <span class="is-finish span-block"></span>
            <span>已完成</span>
          </div>

          <div class="col-height">
            <span class="is-error span-block"></span>
            <span>异常</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="UM" v-if="state.iconActiveName == 'UM'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤5</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>5-9</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>10-13</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>14-17</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>18-21</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="LM" v-if="state.iconActiveName == 'LM'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤60</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>61-70</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>71-80</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>81-90</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>1</span>
          </div> -->

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥90</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="WM" v-if="state.iconActiveName == 'WM'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤100</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>101-120</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>121-140</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>141-160</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>161-180</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥180</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="K" v-if="state.iconActiveName == 'K'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.5</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.5-0.8</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.8-0.9</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.9-1.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>1.0-1.1</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>1.1-1.2</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥1.2</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="SM" v-if="state.iconActiveName == 'SM'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤10</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>10-20</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>21-30</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>31-40</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>41-50</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>51-60</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥61</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="SM" v-if="state.iconActiveName == 'SM'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤10</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>10-20</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>21-30</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>31-40</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>41-50</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>51-60</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥61</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="KI" v-if="state.iconActiveName == 'KI'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.2</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.2-0.3</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.3-0.4</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.4-0.5</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>41-50</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>51-60</span>
          </div> -->
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.5</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="KG" v-if="state.iconActiveName == 'KG'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.15</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.15-0.30</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.30-0.45</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.45-0.60</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>41-50</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>51-60</span>
          </div> -->
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.60</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="CG" v-if="state.iconActiveName == 'CG'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.96</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.96-0.97</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.97-0.98</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.98-0.99</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>41-50</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>51-60</span>
          </div> -->
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.99</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="CI" v-if="state.iconActiveName == 'CI'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.4</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.5-0.6</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.6-0.7</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.7-0.8</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>41-50</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>51-60</span>
          </div> -->
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.8</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="CS" v-if="state.iconActiveName == 'CS'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.2</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.20-0.60</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.60-0.70</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.70-0.80</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>0.80-0.90</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>0.90-1.0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥1.0</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="L" v-if="state.iconActiveName == 'L'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>1</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>2</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>3-4</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>5-6</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥6</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="X" v-if="state.iconActiveName == 'X'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.20</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.20-0.30</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.30-0.35</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.35-0.40</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>0.40-0.45</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>0.45-0.60</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥0.60</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="ks" v-if="state.iconActiveName == 'ks'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.2</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.2-1.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>1.0-3.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>3.0-5.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥5.0</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="prep" v-if="state.iconActiveName == 'prep'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.4</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.4-0.5</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.5-0.6</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.6-0.7</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.7</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="ki1" v-if="state.iconActiveName == 'ki1'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.2</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.2-0.4</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.4-0.6</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.6-0.8</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.8</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="ki2" v-if="state.iconActiveName == 'ki2'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.6</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.6-1.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>1.0-1.2</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>1.2-1.4</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥1.4</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="kp1" v-if="state.iconActiveName == 'kp1'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.45</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.45-0.60</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.60-0.75</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.75-0.90</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.90</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="kp2" v-if="state.iconActiveName == 'kp2'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.45</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.45-0.60</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.60-0.75</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.75-0.90</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.90</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="ks2g" v-if="state.iconActiveName == 'ks2g'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.15</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.15-0.25</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.25-0.35</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.35-0.45</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.45</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="h" v-if="state.iconActiveName == 'h'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤1.5</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>1.5-1.75</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>1.75-2.00</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>2.00-2.25</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥2.25</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="h1" v-if="state.iconActiveName == 'h1'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.45</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.45-0.50</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.50-0.55</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.55-0.60</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.60</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="kgs" v-if="state.iconActiveName == 'kgs'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.01</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.01-0.05</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.05-0.10</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>0.10-0.20</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>≥0.20</span>
          </div>

          <!-- <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥21</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="pa" v-if="state.iconActiveName == 'pa'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.0-0.5</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.5-1.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>1.0-2.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>2.0-5.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>5.0-20.0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥20.0</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="pm" v-if="state.iconActiveName == 'pm'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.0-0.5</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.5-1.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>1.0-2.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>2.0-5.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>5.0-20.0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥20.0</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="ra" v-if="state.iconActiveName == 'ra'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.0-0.5</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.5-1.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>1.0-2.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>2.0-5.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>5.0-20.0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥20.0</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="rm" v-if="state.iconActiveName == 'rm'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="xajUmColor1 span-block"></span>
            <span>≤0.0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor2 span-block"></span>
            <span>0.0-0.5</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor3 span-block"></span>
            <span>0.5-1.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor4 span-block"></span>
            <span>1.0-2.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor7 span-block"></span>
            <span>2.0-5.0</span>
          </div>

          <div class="col-height">
            <span class="xajUmColor5 span-block"></span>
            <span>5.0-20.0</span>
          </div>
          <div class="col-height">
            <span class="xajUmColor6 span-block"></span>
            <span>≥20.0</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="4" v-if="state.iconActiveName == '4'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="value1 span-res"></span>
            <span>≥250.0(0)</span>
          </div>

          <div class="col-height">
            <span class="value2 span-res"></span>
            <span>100.0~249.9(0)</span>
          </div>

          <div class="col-height">
            <span class="value3 span-res"></span>
            <span>50.0~99.9(0)</span>
          </div>

          <div class="col-height">
            <span class="value4 span-res"></span>
            <span>25.0~49.9(0)</span>
          </div>
          <div class="col-height">
            <span class="value5 span-res"></span>
            <span>10.0~24.9(0)</span>
          </div>
          <div class="col-height">
            <span class="value6 span-res"></span>
            <span>0.1~9.9(0)</span>
          </div>
          <div class="col-height">
            <span class="value7 span-res"></span>
            <span>0~0.1(166)</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="5" v-if="state.iconActiveName == '5'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="value6 span-block"></span>
            <span>0~10</span>
          </div>
          <div class="col-height">
            <span class="value5 span-block"></span>
            <span>10~50</span>
          </div>
          <div class="col-height">
            <span class="value4 span-block"></span>
            <span>50~500</span>
          </div>
          <div class="col-height">
            <span class="value3 span-block"></span>
            <span>500~1000</span>
          </div>
          <div class="col-height">
            <span class="value2 span-block"></span>
            <span>1000~5000</span>
          </div>
          <div class="col-height">
            <span class="value1 span-block"></span>
            <span>≥5000</span>
          </div>

          <!-- <div class="col-height">
            <span class="value7 span-res"></span>
            <span>0~0.1(166)</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="6" v-if="state.iconActiveName == '6'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="value6 span-block"></span>
            <span>0~10</span>
          </div>
          <div class="col-height">
            <span class="value5 span-block"></span>
            <span>10~50</span>
          </div>
          <div class="col-height">
            <span class="value4 span-block"></span>
            <span>50~500</span>
          </div>
          <div class="col-height">
            <span class="value3 span-block"></span>
            <span>500~1000</span>
          </div>
          <div class="col-height">
            <span class="value2 span-block"></span>
            <span>1000~5000</span>
          </div>
          <div class="col-height">
            <span class="value1 span-block"></span>
            <span>≥5000</span>
          </div>

          <!-- <div class="col-height">
            <span class="value7 span-res"></span>
            <span>0~0.1(166)</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="7" v-if="state.iconActiveName == '7'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="value1 span-res"></span>
            <span>≥250.0(0)</span>
          </div>

          <div class="col-height">
            <span class="value2 span-res"></span>
            <span>100.0~249.9(0)</span>
          </div>

          <div class="col-height">
            <span class="value3 span-res"></span>
            <span>50.0~99.9(0)</span>
          </div>

          <div class="col-height">
            <span class="value4 span-res"></span>
            <span>25.0~49.9(0)</span>
          </div>
          <div class="col-height">
            <span class="value5 span-res"></span>
            <span>10.0~24.9(0)</span>
          </div>
          <div class="col-height">
            <span class="value6 span-res"></span>
            <span>0.1~9.9(0)</span>
          </div>
          <div class="col-height">
            <span class="value7 span-res"></span>
            <span>0~0.1(166)</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="8" v-if="state.iconActiveName == '8'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="value6 span-block"></span>
            <span>0~10</span>
          </div>
          <div class="col-height">
            <span class="value5 span-block"></span>
            <span>10~50</span>
          </div>
          <div class="col-height">
            <span class="value4 span-block"></span>
            <span>50~500</span>
          </div>
          <div class="col-height">
            <span class="value3 span-block"></span>
            <span>500~1000</span>
          </div>
          <div class="col-height">
            <span class="value2 span-block"></span>
            <span>1000~5000</span>
          </div>
          <div class="col-height">
            <span class="value1 span-block"></span>
            <span>≥5000</span>
          </div>

          <!-- <div class="col-height">
            <span class="value7 span-res"></span>
            <span>0~0.1(166)</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="9" v-if="state.iconActiveName == '9'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="value6 span-block"></span>
            <span>0~10</span>
          </div>
          <div class="col-height">
            <span class="value5 span-block"></span>
            <span>10~50</span>
          </div>
          <div class="col-height">
            <span class="value4 span-block"></span>
            <span>50~500</span>
          </div>
          <div class="col-height">
            <span class="value3 span-block"></span>
            <span>500~1000</span>
          </div>
          <div class="col-height">
            <span class="value2 span-block"></span>
            <span>1000~5000</span>
          </div>
          <div class="col-height">
            <span class="value1 span-block"></span>
            <span>≥5000</span>
          </div>

          <!-- <div class="col-height">
            <span class="value7 span-res"></span>
            <span>0~0.1(166)</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="11" v-if="state.iconActiveName == '11'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="value-1 span-block"></span>
            <span>0~1.0</span>
          </div>
          <div class="col-height">
            <span class="value-2 span-block"></span>
            <span>1.1~2.0</span>
          </div>
          <div class="col-height">
            <span class="value-3 span-block"></span>
            <span>2.1~3.0</span>
          </div>
          <div class="col-height">
            <span class="value-4 span-block"></span>
            <span>3.1~4.0</span>
          </div>
          <div class="col-height">
            <span class="value-5 span-block"></span>
            <span>4.1~5.0</span>
          </div>
          <div class="col-height">
            <span class="value-6 span-block"></span>
            <span>5.1~10.0</span>
          </div>
          <div class="col-height">
            <span class="value-7 span-block"></span>
            <span>≥10</span>
          </div>

          <!-- <div class="col-height">
            <span class="value7 span-res"></span>
            <span>0~0.1(166)</span>
          </div> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="图例" name="12" v-if="state.iconActiveName == '12'">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图标</span>
              <span class="left-title" v-if="state.typeName">-{{ state.typeName }}</span>
            </div>
          </span>
        </template>
        <div class="legend-icon-box">
          <div class="col-height">
            <span class="value-1 span-block"></span>
            <span>0~1.0</span>
          </div>
          <div class="col-height">
            <span class="value-2 span-block"></span>
            <span>1.1~2.0</span>
          </div>
          <div class="col-height">
            <span class="value-3 span-block"></span>
            <span>2.1~3.0</span>
          </div>
          <div class="col-height">
            <span class="value-4 span-block"></span>
            <span>3.1~4.0</span>
          </div>
          <div class="col-height">
            <span class="value-5 span-block"></span>
            <span>4.1~5.0</span>
          </div>
          <div class="col-height">
            <span class="value-6 span-block"></span>
            <span>5.1~10.0</span>
          </div>
          <div class="col-height">
            <span class="value-7 span-block"></span>
            <span>≥10</span>
          </div>

          <!-- <div class="col-height">
            <span class="value7 span-res"></span>
            <span>0~0.1(166)</span>
          </div> -->
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="成果图例" name="two" v-if="iconActiveName.vulue == two">
        <template #label>
          <span class="custom-tabs-label">
            <div>
              <span class="left-title">图例</span>
            </div>
            <el-icon class="right-close" @click="handleCloseLegend">
              <Close />
            </el-icon>
          </span>
        </template>
        <div class="rain-info">
          <div class="legend-icon-box">
            <div class="col-height">
              <span class="value1 span-res"></span>
              <span>≥250.0(0)</span>
            </div>

            <div class="col-height">
              <span class="value2 span-res"></span>
              <span>100.0~249.9(0)</span>
            </div>

            <div class="col-height">
              <span class="value3 span-res"></span>
              <span>50.0~99.9(0)</span>
            </div>

            <div class="col-height">
              <span class="value4 span-res"></span>
              <span>25.0~49.9(0)</span>
            </div>
            <div class="col-height">
              <span class="value5 span-res"></span>
              <span>10.0~24.9(0)</span>
            </div>
            <div class="col-height">
              <span class="value6 span-res"></span>
              <span>0.1~9.9(0)</span>
            </div>
            <div class="col-height">
              <span class="value7 span-res"></span>
              <span>0~0.1(166)</span>
            </div>
          </div>
        </div>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onBeforeUnmount } from 'vue'
import emitter from '@/utils/bus'
// const iconActiveName = ref('one')
const props = defineProps({
  type: {
    type: Object,
    default: ''
  }
})
const state = reactive({
  typeName: '',
  // 默认图例不展示
  iconActiveName: '',
  // 默认图例不展示
  showLegend: false
})
watch(
  () => {
    props.type
  },
  () => {
    state.iconActiveName = props.type?.id
    state.typeName = props.type?.value
  },
  {
    deep: true,
    immediate: true
  }
)
emitter.on('switchLegend', (name) => {
  state.iconActiveName = 'one'
  state.typeName = false

  if (name == 'second') {
    // 显示图例框
    state.showLegend = true
  } else {
    state.showLegend = false
  }
})
emitter.on('ZTLegend', () => {
  state.showLegend = true
})
onBeforeUnmount(() => {
  emitter.off('switchLegend') //关闭
  emitter.off('ZTLegend') //关闭
})
</script>

<style lang="less" scoped>
.legend-box {
  position: absolute;
  z-index: 99;
  background: rgba(255, 255, 255, 0.7);
  bottom: 20px;
  // right: 1120px;
  right: 100%;
  width: 250px;
  height: 300px;
  // margin-left: 20px;
  border: #169bd5 1px solid;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 5px;
  .custom-tabs-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-title {
      font-size: 17px;
    }
    .right-title {
      color: black;
      font-size: 17px;
    }
    .right-close {
      font-size: 25px;
    }
  }
  .legend-icon-box {
    height: 250px;
    overflow-y: auto;
    .col-height {
      display: flex;
      align-items: center;
      height: 40px;
      span {
        color: #409eff;
      }
      .span-block {
        width: 35px;
        height: 15px;
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 0.088);
      }
      .span-res {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 0.088);
      }
      .value1 {
        background-color: rgb(127, 1, 64);
      }
      .value2 {
        background-color: rgb(249, 1, 249);
      }
      .value3 {
        background-color: rgb(0, 0, 253);
      }
      .value4 {
        background-color: rgb(98, 183, 255);
      }
      .value5 {
        background-color: rgb(62, 184, 62);
      }
      .value6 {
        background-color: rgb(167, 240, 143);
      }
      .value7 {
        background-color: rgb(174, 174, 174);
      }
      .value-1 {
        background-color: #67ddf1;
      }
      .value-2 {
        background-color: #7cf14b;
      }
      .value-3 {
        background-color: #e2f150;
      }
      .value-4 {
        background-color: #df742f;
      }
      .value-5 {
        background-color: #da3263;
      }
      .value-6 {
        background-color: #d830d9;
      }
      .value-7 {
        background-color: #4816ec;
      }
      .open-no {
        background-color: #999d9c;
      }
      .wait-ing {
        background-color: #86e7fe;
      }
      .sw-comput {
        background-color: #00ff7f;
      }
      .sk-comput {
        background-color: #006994;
      }

      .is-finish {
        background-color: #008000;
      }
      .is-error {
        background-color: #ff0000;
      }
      //新安江xajColor1
      .xajUmColor1 {
        background-color: #86e7fe;
      }
      .xajUmColor2 {
        background-color: #00c5ff;
      }
      .xajUmColor3 {
        background-color: #55ff00;
      }
      .xajUmColor4 {
        background-color: #ffff73;
      }
      .xajUmColor5 {
        background-color: #ff0000;
      }
      .xajUmColor6 {
        background-color: #a52a2a;
      }
      .xajUmColor7 {
        background-color: #ffc800;
      }
    }
  }

  :deep(.el-tabs) {
    .el-tabs__header {
      margin-bottom: 5px;
    }
  }
  .legend-item {
    margin-left: 20px;
  }
}
</style>>
